<template>
  <div class="listTemplate">
    <header class="t-header">
      <mu-button flat small class="t-close" v-close><i class="iconfont iconangle-left"></i></mu-button>
      <span class="t-title">检查详情</span>
    </header>
    <section class="t-body">
      <!-- <mu-paper class="demo-paper" :z-depth="1" style="padding:5px 8px;">
        <mu-stepper :active-step="activeStep" class="stepper-lan">
          <mu-step>
            <mu-step-label>
              <span class="desc">提交问题</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
          <mu-step>
            <mu-step-label>
              <span class="desc">完成整改</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
          <mu-step>
            <mu-step-label>
              <span class="desc">任务指派</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
          <mu-step>
            <mu-step-label>
              <span class="desc">完成复查</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
        </mu-stepper>
      </mu-paper> -->
      <mu-expansion-panel :expand="true">
        <div slot="header">检查人：{{dataPool.checkUserName}}</div>
        <section class="box" >
          <p class="line-list textdot">
            <span class="">项目名称：{{dataPool.areaName}}</span>
          </p>
          <p class="line-list" >
            <span>检查类型：{{dataPool.checkTypeName}}</span>
          </p>
          <p class="line-list" >
            <span>所属区域：{{dataPool.areaName}}</span>
          </p>
          <p class="line-list textdot">
            <span>检查部位：{{dataPool.checkParts}}</span>
          </p>
          <p class="line-list" >
            <span>检查表：检查表名称</span>
            <section class="table">
              <div class="tr header">
                <div class="td">测试检查表</div>
              </div>
              <div class="tr subheader">
                <div class="td">检查项</div>
                <div class="td">检查内容</div>
                <div class="td">检查结果</div>
              </div>
              <div class="tr">
                <div class="td">检查项名</div>
                <div class="td"  style="width:200%;">
                  <div class="tr">
                    <div class="td">检查内容1</div>
                    <div class="td">
                      <mu-checkbox label="有隐患" disabled></mu-checkbox>
                      <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                    </div>
                  </div>
                  <div class="tr">
                    <div class="td">检查内容2</div>
                    <div class="td">
                      <mu-checkbox label="有隐患" disabled></mu-checkbox>
                      <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </p>
          <p class="line-list" >
            <span>检查结果：{{dataPool.problemDetailList ? dataPool.problemDetailList.length : 0}}个问题</span>
          </p>
          <section v-if="dataPool.problemDetailList">
            <mu-expansion-panel class="noshadow" v-for="(item, index) in dataPool.problemDetailList" :key="index">
              <div slot="header">问题{{++index}}</div>
              <p class="line-list textdot">
                <span>问题类型：{{item.problemTypeName}}</span>
              </p>
              <p class="line-list textdot">
                <span>问题等级：{{item.problemLevel}}</span>
              </p>
              <section class="img-box">
                现场照片：
                <img :src="item.scenePhotos" preview="0"/>
              </section>
              <p class="line-list textdot" >
                <span>问题描述：{{item.problemDescription}}</span>
              </p>
              <p class="line-list flex_b">
                <span>平面图标记</span>
                <span class="active-color">查看</span>
              </p>
              <p class="line-list flex_b">
                <span>整改期限：{{item.rectTime}}</span>
              </p>
              <p class="line-list textdot" >
                <span>整改要求：{{item.rectDesc}}</span>
              </p>
              <p class="line-list flex_b">
                <span>责任单位：无</span>
              </p>
              <p class="line-list flex_b">
                <span>整改责任人：
                  <mu-avatar color="primary" size="25">{{splitFirstLetter(item.responsibleUserName)}}</mu-avatar>
                  {{item.responsibleUserName}}
                </span>
              </p>
              <p class="line-list flex_b">
                <span>抄送人：
                  <mu-avatar color="primary" size="25">{{splitFirstLetter(item.responsibleUserName)}}</mu-avatar>
                  {{item.responsibleUserName}}
                </span>
              </p>
            </mu-expansion-panel>
          </section>
        </section>
      </mu-expansion-panel>
      <mu-expansion-panel class="noshadow">
            <div slot="header">整改责任人：张三</div>
            <p class="line-list textdot">
              <span>整改责任人：张三</span>
            </p>
            <p class="line-list textdot">
              <span>整改完成时间：2019-09-25 15:23</span>
            </p>
            <section class="img-box">
              现场照片：
              <img src="../../../assets/img/default.png" />
            </section>
            <p class="line-list textdot">
              <span>整改结果描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
          </mu-expansion-panel>
          <mu-expansion-panel class="noshadow">
            <div slot="header">任务指派：张三</div>
            <p class="line-list textdot">
              <span>任务指派：张三</span>
            </p>
            <p class="line-list textdot">
              <span>任务指派时间：2019-09-25 15:23</span>
            </p>
          </mu-expansion-panel>
          <mu-expansion-panel class="noshadow">
            <div slot="header">复查人：张三</div>
            <p class="line-list textdot">
              <span>复查人：张三</span>
            </p>
            <p class="line-list textdot">
              <span>复查时间：2019-09-25 15:23</span>
            </p>
            <p class="line-list textdot">
              <span>复查结果描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
            <section class="img-box">
              现场照片：
              <img src="../../../assets/img/default.png" />
            </section>

          </mu-expansion-panel>
    </section>
  </div>
</template>

<script>
import apis from '../../../services/apis';
export default {
  name: 'mainPage',
  data () {
    return {
      num: 20,
      refreshing: false,
      loading: false,
      text: 'List',
      open:false,
      selected:true,
      activeStep:0,

      /**
       * 新增
       */
      dataPool: {},
    }
  },
  mounted(){
    const { id } = this.$route.query;
    this.loadCheckDetail(id);
  },
  created(){

  },
  methods:{
    splitFirstLetter(letters) {
      if (letters !== null && letters !== undefined) {
        return letters.substr(0, 1);
      }
      return '无';
    },
   loadCheckDetail(id) {
     this.$A.Go('get', apis.check_work_detail, {id})
     .then(res => {
       console.info('res:', res);
       const { code, msg, body } = res;
       this.dataPool = body;
       this.$A.MS(msg);
     })
     .catch(err => {
       this.$A.MS('获取数据失败');
     })
   }
  },
}
</script>
<style lang="scss" scoped>
  .listTemplate{
      height:100%;
      width:100%;
      position:relative;
      overflow:hidden;
      .t-header{
          height:0.45rem;
          width:100%;
          color:#3D3D3D;
          box-sizing:border-box;
          padding:5px 8px;
          position:relative;
          // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
          -border-bottom:1px solid #dedede;
          background-color:#fff;
          display:flex;
          justify-content:space-between;
          align-items:center;
          .t-close{
            min-width: 28px;
            border-radius: 50%;
          }
          .t-title{
              position:absolute;
              top:50%;
              left:50%;
              transform:translate(-50%,-50%);
              font-size: 0.19rem;
              font-weight: 500;
          }
          .t-right-icon{
              font-size:0.2rem;
          }
      }
      .t-body{
          height:calc(100% - 0.45rem);
          width:100%;
          overflow:auto;
          background-color:#F8F8F8;
          padding:10px;
      }
      .t-body + .t-footer{
          height:0.45rem;
          width:100%;
      }
      .t-footer + .t-body{
          height:calc(100% - 0.9rem);
      }
      // 自定义样式
      .box{
        padding:10px 15px;
        background-color:#fff;
      }
      .line-list{
        margin:15px 0;
        font-size:0.15rem;
      }
      .textdot{
        display:block;
        width:100%;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }

    .table{
      width:100%;
      height:auto;
      border:1px solid #dedede;
      font-size:0.12rem;
      line-height:0.2rem;
      .tr{
        width:100%;
        border-bottom:1px solid #dedede;
        display:flex;
        justify-content:space-between;
        align-items:center;
        .td{
          border-left:1px solid #dedede;
          width:100%;
          text-align:center;
          .tr{
            border-bottom:1px solid #dedede;
            border-left:none;
          }
          >.tr:last-child{
            border:none;
          }
        }
        >.td:first-child{
          border:none;
        }
        .tr{
          border-left:1px solid #dedede;
        }
      }
      >.tr:last-child{
        border:none;
      }
      .header{
        background-color:#ddd;
        color:#000;
      }
      .subheader{
        background-color:#eee;
        color:#333;
      }
    }
  }
</style>
